<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <!-- <li><input type="checkbox" checked />标题一</li>
      <li><input type="checkbox" />标题二</li>
      <li><input type="checkbox" />标题三</li> -->
    </ul>
    <input type="checkbox" class="checkAll" /> 全选
    <script>
      //模板字符串 : 定义字符串的一种方式
      //ES5 :通过单引号或者是双引号
      // var name = "张三";
      // var age = 20;
      // //拼接变量
      // var str = "我的名字是" + name + ",我的年龄是" + age + "岁";
      //不支持换行
      // var  str ="<div>
      //                 <span>我是内容</span>
      //           </div>"
      // var str = "<div>" + "<span>我是内容</span>" + "</div>";
      // console.log(str);
      //ES6 :模板字符串
      //1.支持换行
      // let str = `<div>
      //               <span>我是内容</span>
      //             </div>`;

      //2.通过插值表达式 支持变量的解析
      // var name = "张三";
      // var age = 20;
      // var str = `我的名字是${name},我的年龄是${age}`;
      // console.log(str);

      //3.插值表达式可以接收简单的逻辑
      //${变量}  {{变量}} {}  php{$变量} ejs<%=变量%>

      // var str = `我的年龄是${1 + age}`;
      // console.log(str);

      // var str = `我的名字是${name + "hello"}`;
      // console.log(str);

      //还可以接受有返还值的逻辑
      // function fn() {
      //   return "hello";
      // }
      // var str = `werwer${fn()}sdfs`;
      // console.log(str);

      //三元运算符
      // var flag = true;
      // var res = flag ? "张三" : "李四";
      // console.log(res);

      //
      //
      var flag = true;
      document.onclick = function () {
        flag = !flag;
        var str = `werwer${flag ? "张三" : "李四"}sdfs`;
        document.body.innerHTML = str;
      };

      //案例
      console.log(a); //undefined
      if (false) {
        var a = 10;
      }

      var a;
      console.log(a);
      if (false) {
        a = 10;
      }

      if (true) {
        a = 10;
      }
      console.log(a);
      if (false) {
        b = 10;
        console.log(b);
      }
    </script>
  </body>
</html>
